<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球的运动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
    function Ball(){
        this.setBall = document.createElement("div");
        this.size = parseInt(Math.random()*80+20);
        this.color = randomColor();
        //小球初始位置随机
        this.posX = parseInt(Math.random()*(getClientSize("width") - this.size));
        this.posY = parseInt(Math.random()*(getClientSize("height")-this.size));
        //小球的运动方向及速度
        this.speedX = parseInt(Math.random()*6+5)*(Math.random()*2<1 ? 1:-1);
        this.speedY = parseInt(Math.random()*6+5)*(Math.random()*2<1 ? 1:-1);


        //重新给小球定义
        this.initBall = function(){
            //小球的宽度
            this.setBall.style.width = this.size + "px";
            //小球的高度
            this.setBall.style.height = this.size + "px";
            //变成圆形
            this.setBall.style.borderRadius = "50%";
            //小球的背景色
            this.setBall.style.backgroundColor = this.color;
            //给小球设置position
            this.setBall.style.position = "absolute";
            this.setBall.style.left = this.posX + "px";
            this.setBall.style.top = this.posY + "px";

            document.body.appendChild(this.setBall);
        }

        //小球的运动
        this.ballRun = function(){
            var ball = this;
            //设置定时器
            setInterval(moveStatus,50);

            function moveStatus() {
                // 规定小球的运动方式
                if(ball.setBall.offsetLeft < 0 || ball.setBall.offsetWidth + ball.setBall.offsetLeft + ball.speedX >= getClientSize("width")){
                    //小球到达屏幕的左右边缘时改变运动方向
                    ball.speedX = -ball.speedX;
                }
                if (ball.setBall.offsetTop < 0 || ball.setBall.offsetHeight + ball.setBall.offsetTop + ball.speedY >= getClientSize("height")){
                    //小球到达屏幕的上下边缘时改变运动方向
                    ball.speedY = -ball.speedY;
                }
                //重新给小球left属性赋值ball.setBall.offsetLeft，是小球左侧到浏览器左侧的距离
                ball.setBall.style.left = ball.setBall.offsetLeft +ball.speedX + "px";
                //同上
                ball.setBall.style.top = ball.setBall.offsetTop + ball.speedY + "px";

            }
        }
    }

    for (var j = 0; j < 60; j++) {
        var newBall = new Ball();
        newBall.initBall();
        newBall.ballRun();

    }
    //随机颜色rgba
    function randomColor(){
        var color = "rgba(";
        for (var i = 0; i < 3; i++) {
            color = color + parseInt(Math.random()* 256)+"，";
        }
        color += Math.random().toFixed(1)+"）";
        return color;
    }
    //获取浏览器的大小
    function getClientSize(attr){
        if(attr == "width"){
            return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        }else if(attr == "height"){
            return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
    }
</script>
</html>